
<template>
  <div>
    <!-- 个人信息部分 -->
    <div class="head">
      <van-cell center class="custom" is-link url="/user/setting">
        <template #title>
          <div style="display: flex">
            <van-image round width="80" height="80" src="https://img01.yzcdn.cn/vant/cat.jpeg"/>
            <div class="custom-info">
              <div>{{ user.nickname }}</div>
              <div>{{ user.phone }}</div>
            </div>
          </div>
        </template>
        <template #right-icon>
          <van-icon name="arrow" size="28"/>
        </template>
      </van-cell>
    </div>

    <!-- 信息展示 -->
    <van-cell class="cell-item">
      <template #title>
        <span class="custom-title">身份证号</span>
        <span class="custom-content">{{ user.idCard }}</span>
      </template>
    </van-cell>
    <van-cell class="cell-item">
      <template #title>
        <span class="custom-title">性别</span>
        <span class="custom-content">{{ user.sex === 1 ? '男' : '女' }}</span>
      </template>
    </van-cell>
    <van-cell class="cell-item">
      <template #title>
        <span class="custom-title">入学年级</span>
        <span class="custom-content">{{ user.enrTime }}</span>
      </template>
    </van-cell>
    <van-cell class="cell-item">
      <template #title>
        <span class="custom-title">学院</span>
        <span class="custom-content">{{ user.departmentName }}</span>
      </template>
    </van-cell>
    <van-cell class="cell-item">
      <template #title>
        <span class="custom-title">专业</span>
        <span class="custom-content">{{ user.majorName }}</span>
      </template>
    </van-cell>
    <van-cell class="cell-item">
      <template #title>
        <span class="custom-title">班级</span>
        <span class="custom-content">{{ user.sex === 1 ? '男' : '女' }}</span>
      </template>
    </van-cell>
    <van-cell class="cell-item">
      <template #title>
        <span class="custom-title">选修课学分</span>
        <span class="custom-content">{{ user.credit }}</span>
      </template>
    </van-cell>
    <van-cell class="cell-item">
      <template #title>
        <span class="custom-title">学习成果积分</span>
        <span class="custom-content">{{ user.scores }}</span>
      </template>
    </van-cell>

    <!-- 退出按钮 -->
    <div style="height: 5vh"></div>
    <van-button color="#1baeae" type="primary" size="large" @click="logout()">退出登录</van-button>
  </div>
</template>

<script>
import { getInfo } from "@/api/user";

export default {
  name:"User",
  data(){
    return{
      // 用户信息
      user:{}
    }
  },
  created() {
    this.getUserInfo();
  },
  methods:{
    /**
     * 退出登录事件
     * */
    logout(){
      this.$store.dispatch("user/logout").then(res=>{
        // 跳转登录页面
        this.$router.push("/login");
      })
    },
    /**
     * 获取用户信息
     * */
    async getUserInfo(){
      let res = await getInfo();
      this.user = res.data
    }
  }
}
</script>

<style scoped lang="scss">
.head{
  width: 100vw;
  height: 20vh;
  background-color: #1baeae;
  position: relative;
  .custom{
    position: absolute;
    bottom: 10px;
    color: white;
    background-color: #1baeae !important;
    .custom-info{
      margin-left: 10px;
      font-size: 18px;
      div{
        margin-top: 5px;
      }
    }
  }
}
.cell-item{
  border-bottom: 1px solid black !important;
  .custom-title{
    color: #c2c2c2;
    display: inline-block;
    width: 30vw;
  }
}

</style>
